<!DOCTYPE html>
<html lang="en">
<head>
    <title>首页</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="../css/main.css">
	<script src="../script/vue.js"></script>
	<script src="../script/axios.js"></script>
	<script src="../script/main.js"></script>
</head>
<body>
  <div class="app" id="app">
    <img class="music" :class="music_play?'music2':''" @click="music_play=!music_play" src="../image/player.png">
    <div class="bg">
      <img src="../image/bg0.jpg">
    </div>
    <ul>
      <li><img class="module1" src="../image/image1.png"></li> <!-- 果园 -->
      <li><img class="module2" @click="open_user" src="../image/image2.png"></li> <!-- 会员 -->
      <li><img class="module3" src="../image/image3.png"></li> <!-- 娱乐 -->
      <li><img class="module4" @click="open_login" src="../image/image4.png"></li> <!-- 签到 -->
    </ul>
  </div>
  <script>
	apiready = function(){
		Vue.prototype.game = new Game("../mp3/bg1.mp3");  // vue3.0里面需要修改这句代码
		new Vue({
			el:"#app",
			data(){
				return {
                    music_play: true,  // 默认播放背景音乐
                }
			},
            watch:{
                music_play(){
                    if(this.music_play){
                        this.game.play_music("../mp3/bg1.mp3");
                    }else{
                        this.game.stop_music();
                    }
                }
            },
            methods:{
                open_login(){
                    this.game.goWin("login","./login.html");
                },
                open_user(){
                    this.game.goto(this, "user","./user.html");
                }
            }
		})
	}
	</script>
</body>
</html>